<template>
    <ElTabs v-model="selectUser" v-bind="$attrs">
        <ElTabPane v-for="userName in userList" :label="userName" :name="userName" :key="userName">
            <hand-write-board v-model="SignImgs[userName]" :key="userName" :disabled="disabled" @done="signDone"
                style="height:120px;border:1px solid #cecece;margin-bottom:10px;">
            </hand-write-board>
        </ElTabPane>
    </ElTabs>
    <br />
</template>

<script>

import { ElTabs, ElTabPane } from 'element-plus'
export default {
    name: "MultiSign",
    components: [ElTabs, ElTabPane],
    props: {
        modelValue: String,
        disabled: Boolean,
        users: String
    },
    emits: ["update:modelValue"],
    data() {
        return {
            SignImgs: {},
            userList: [],
            selectUser: ""
        }
    },
    created() {
        this.setVal();
    },
    methods: {
        setVal() {
            this.userList = (this.users || "").split(";").filter(p => p.length > 0);
            if (this.userList.indexOf(this.selectUser) == -1) {
                if (this.userList.length > 0) {
                    this.selectUser = this.userList[0];
                } else {
                    this.selectUser = "";
                }
            }
            let img = (this.modelValue || "").split(";");
            const imgs = {};
            for (let i = 0; i < this.userList.length; i++) {
                imgs[this.userList[i]] = img.length > i ? img[i] : "";
            }
            this.SignImgs = imgs;
            let str = this.getSings();
            if (str != this.modelValue) {
                this.$emit("update:modelValue", str);
            }
        },
        getSings() {
            let imgs = [];
            for (let i = 0; i < this.userList.length; i++) {
                imgs.push(this.SignImgs[this.userList[i]]);
            }

            return imgs.length>0? imgs.join(";"):"";
        },
        signDone() {
            let str = this.getSings();
            this.$emit("update:modelValue", str);
        }
    },
    watch: {
        modelValue() {
            this.setVal();
        },
        users() {
            this.setVal();
        }
    }
}
</script>
